<template>
  <div>
    <ul class="option">
      <li>
        <label for="">楼宇名称</label>
        <el-input
          placeholder="请输入名称"
          v-model="build_name"
          @keydown.enter.native="searchByOption"
          clearable
        >
        </el-input>
      </li>
      <!-- <li>
        <label for="">权属人</label>
        <el-input
          placeholder="请输入权属人"
          v-model="owner"
          @keyup.enter.native="searchByOption"
          clearable
        >
        </el-input>
      </li> -->
      <li>
        <label for="">所属县区</label>
        <el-select v-model="district_name" clearable placeholder="请选择区域">
          <el-option
            v-for="item in district_options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </li>
      <li>
        <label for="">楼宇类型</label>
        <el-select v-model="build_type" clearable placeholder="请选择类型">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </li>
      <li class="btn-box-flex">
        <el-button @click="searchByOption">搜索</el-button>
        <el-button @click="ClearOption">清空</el-button>
      </li>
    </ul>
    <div class="size clearfix">
      <div class="add" @click="showImportBox">
        数据导入
      </div>
      <div class="add" @click="showTemplateBox">
        模板下载
      </div>
      <div class="add" @click="showExportBox">
        批量导出
      </div>

      <div class="add examine" @click="showResourcesBox">
        批量审核
      </div>
      <div class="add del" @click="showDelBox">
        批量删除
      </div>
    </div>
    <el-table
      :data="listInfo"
      ref="multipleTable"
      border
      stripe
      row-key="id"
      style="width: 100%;"
      :height="491"
      tooltip-effect="light"
      :header-cell-style="{
        textAlign: 'center',
      }"
      :cell-style="{
        textAlign: 'center',
      }"
      @selection-change="handleSelectionChange"
    >
      <el-table-column
        type="selection"
        :reserve-selection="true"
        width="48"
        align="center"
        fixed
      >
      </el-table-column>
      <el-table-column label="序号" width="60" fixed>
        <template slot-scope="scope">
          <div>
            {{ (currentPage - 1) * per_page + scope.row.index }}
          </div>
        </template>
      </el-table-column>
      <!-- <el-table-column  prop="index" label="序号" fixed> </el-table-column> -->
      <el-table-column
        :show-overflow-tooltip="true"
        label="楼宇名称"
        fixed
        width="200"
      >
        <template slot-scope="scope">
          <!-- <div @click="" style="cursor:pointer"> -->
          {{ scope.row.build_name }}
          <!-- </div> -->
        </template>
      </el-table-column>
      <el-table-column
        :show-overflow-tooltip="true"
        prop="district_name"
        label="所属县区"
        width="150"
      >
      </el-table-column>
      <el-table-column
        :show-overflow-tooltip="true"
        prop="build_type"
        label="楼宇类型"
      >
      </el-table-column>

      <el-table-column
        :show-overflow-tooltip="true"
        prop="detail_address"
        label="详细地址"
      >
      </el-table-column>
      <el-table-column
        :show-overflow-tooltip="true"
        prop="construction_time"
        label="建成时间（年）"
        width="120"
      >
      </el-table-column>
      <el-table-column
        :show-overflow-tooltip="true"
        prop="cover_land_area"
        label="总占地面积(m²)"
        width="120"
      >
      </el-table-column>
      <el-table-column
        :show-overflow-tooltip="true"
        prop="build_area"
        label="总建筑面积(m²)"
        width="120"
      >
      </el-table-column>
      <el-table-column
        :show-overflow-tooltip="true"
        prop="empty_area"
        label="闲置面积(m²)"
        width="120"
      >
      </el-table-column>
      <el-table-column
        :show-overflow-tooltip="true"
        prop="layer_num"
        label="总层数"
      >
      </el-table-column>
      <!-- <el-table-column
        :show-overflow-tooltip="true"
        prop="build_structure"
        label="建筑结构"
        width="130"
      >
      </el-table-column> -->
      <el-table-column
        :show-overflow-tooltip="true"
        prop="car_space_num"
        label="车位(个)"
      >
      </el-table-column>
      <el-table-column
        :show-overflow-tooltip="true"
        prop="lift_num"
        label="电梯(部)"
      >
      </el-table-column>

      <el-table-column
        :show-overflow-tooltip="true"
        prop="attract_status"
        label="拟招引业态"
        width="120"
      >
      </el-table-column>
      <el-table-column
        :show-overflow-tooltip="true"
        prop="cooperation_model"
        label="合作模式"
      >
      </el-table-column>
      <el-table-column
        :show-overflow-tooltip="true"
        prop="rent_money"
        label="租金范围(元/m²/天)"
        width="150"
      >
      </el-table-column>
      <el-table-column
        :show-overflow-tooltip="true"
        prop="wuye_money"
        label="物业费(元/m²/天)"
        width="150"
      >
      </el-table-column>
      <el-table-column
        :show-overflow-tooltip="true"
        prop="linkman"
        label="联系人"
      >
      </el-table-column>
      <el-table-column
        :show-overflow-tooltip="true"
        prop="link_mobile"
        label="联系方式"
        width="120"
      >
      </el-table-column>
      <el-table-column
        :show-overflow-tooltip="true"
        prop="attract_advantage"
        label="招商优势"
      >
      </el-table-column>
      <el-table-column
        :show-overflow-tooltip="true"
        prop="policy"
        label="优惠政策"
      >
      </el-table-column>
      <el-table-column
        :show-overflow-tooltip="true"
        label="状态"
        fixed="right"
        width="100"
      >
        <template slot-scope="scope">
          <!-- <div @click="" style="cursor:pointer"> -->
          <el-tag v-if="scope.row.audit == 0" type="info">未审核</el-tag>
          <el-tag v-if="scope.row.audit == 1" type="success">审核通过</el-tag>
          <el-tag v-if="scope.row.audit == 2">已提交</el-tag>
          <el-popover
            v-if="scope.row.audit == 4"
            trigger="hover"
            placement="top"
          >
            <el-tag type="danger">
              未通过原因： {{ scope.row.audit_message }}
            </el-tag>
            <div slot="reference" class="name-wrapper">
              <el-tag type="danger">未通过</el-tag>
            </div>
          </el-popover>
          <el-tag v-if="scope.row.audit == 3" type="danger">驳回</el-tag>
          <!-- </div> -->
        </template>
      </el-table-column>

      <el-table-column label="操作" width="240" fixed="right">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="primary"
            @click="editDetail(scope.row.id)"
          >
            编辑
          </el-button>
          <el-button
            size="mini"
            type="warning"
            @click="showDetail(scope.row.id)"
          >
            审核
          </el-button>
          <el-button
            size="mini"
            type="warning"
            @click="rejectById(scope.row.id)"
          >
            驳回
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage"
        :page-size="per_page"
        layout=" prev, pager, next,   jumper"
        :total="total"
      >
      </el-pagination>
    </div>
    <div class="edit">
      <el-dialog
        title="审核商业楼宇"
        :visible.sync="showInfo"
        @close="closeShow"
      >
        <div class="ed-main">
          <div class="ed-left">
            <div>
              <span>楼宇名称</span>
              <el-input
                disabled
                v-model="detailInfo.build_name"
                autocomplete="off"
                placeholder="请填写名称"
              ></el-input>
            </div>
            <div>
              <span>所属县区</span>
              <el-select
                disabled
                v-model="detailInfo.district_name"
                clearable
                placeholder="请选择所属县区"
              >
                <el-option
                  v-for="item in district_options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </div>
            <div>
              <span>楼宇类型</span>
              <el-select
                disabled
                v-model="detailInfo.build_type"
                clearable
                placeholder="请选择楼宇类型"
              >
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </div>

            <div>
              <span>详细地址</span>
              <el-input
                disabled
                v-model="detailInfo.detail_address"
                autocomplete="off"
                placeholder="请填写详细地址"
              ></el-input>
            </div>
            <div>
              <span>建成时间</span>
              <el-date-picker
                disabled
                v-model="detailInfo.construction_time"
                type="year"
                value-format="yyyy"
                placeholder="选择建成时间"
              >
              </el-date-picker>
              <!-- <el-input
              disabled
                v-model="detailInfo.construction_time"
                autocomplete="off"
                placeholder="请填写建成时间"
              ></el-input> -->
            </div>
            <div>
              <span>联系人</span>
              <el-input
                disabled
                v-model="detailInfo.linkman"
                autocomplete="off"
                placeholder="请填写联系人"
              ></el-input>
            </div>
            <div>
              <span>联系方式</span>
              <el-input
                disabled
                v-model="detailInfo.link_mobile"
                autocomplete="off"
                placeholder="请填写联系方式"
              ></el-input>
            </div>

            <div>
              <span>招商优势</span>
              <el-input
                disabled
                type="textarea"
                v-model="detailInfo.attract_advantage"
                autocomplete="off"
                placeholder="请填写招商优势"
              ></el-input>
            </div>
          </div>
          <div class="ed-center">
            <div>
              <span>总层数</span>
              <el-input
                disabled
                v-model="detailInfo.layer_num"
                autocomplete="off"
                placeholder="请填写总层数"
              ></el-input>
            </div>
            <div>
              <span>拟招引业态</span>
              <el-input
                disabled
                v-model="detailInfo.attract_status"
                autocomplete="off"
                placeholder="请填写拟招引业态"
              ></el-input>
            </div>
            <div>
              <span>合作模式</span>
              <el-select
                disabled
                v-model="detailInfo.cooperation_model"
                clearable
                placeholder="请填写合作模式"
              >
                <el-option
                  v-for="item in mode_options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </div>

            <div>
              <span>总占地面积（m²）</span>
              <el-input
                disabled
                v-model="detailInfo.cover_land_area"
                autocomplete="off"
                placeholder="请填写总占地面积"
              ></el-input>
            </div>
            <div class="flex-input">
              <div>
                <span>总建筑面积（m²）</span>
                <el-input
                  disabled
                  v-model="detailInfo.build_area"
                  autocomplete="off"
                  placeholder="请填写面积"
                ></el-input>
              </div>

              <div>
                <span>闲置面积（m²）</span>
                <el-input
                  disabled
                  v-model="detailInfo.empty_area"
                  autocomplete="off"
                  placeholder="请填写面积"
                ></el-input>
              </div>
            </div>
            <div class="flex-input">
              <div>
                <span>车位/个</span>
                <el-input
                  disabled
                  v-model="detailInfo.car_space_num"
                  autocomplete="off"
                  placeholder="请填写个数"
                ></el-input>
              </div>
              <div>
                <span>电梯/部</span>
                <el-input
                  disabled
                  v-model="detailInfo.lift_num"
                  autocomplete="off"
                  placeholder="请填写数量"
                ></el-input>
              </div>
            </div>
            <div class="flex-input">
              <div>
                <span>租金范围(元/m²/天)</span>
                <el-input
                  disabled
                  v-model="detailInfo.rent_money"
                  autocomplete="off"
                  placeholder="请填写"
                ></el-input>
              </div>
              <div>
                <span>物业费(元/m²/天)</span>
                <el-input
                  disabled
                  v-model="detailInfo.wuye_money"
                  autocomplete="off"
                  placeholder="请填写"
                ></el-input>
              </div>
            </div>

            <div>
              <span>优惠政策</span>
              <el-input
                disabled
                type="textarea"
                v-model="detailInfo.policy"
                autocomplete="off"
                placeholder="请填写优惠政策"
              ></el-input>
            </div>
          </div>
          <div class="ed-right">
            <div class="imgs">
              <span>外部图片</span>
              <div class="border-box">
                <img
                  v-if="detailInfo.outer_picture_url"
                  :src="detailInfo.outer_picture_url"
                  alt=""
                />
              </div>
            </div>
            <div class="imgs">
              <span>内部图片</span>
              <div class="border-box">
                <img
                  v-if="detailInfo.inside_picture_url"
                  :src="detailInfo.inside_picture_url"
                  alt=""
                />
              </div>
            </div>
            <div class="imgs">
              <span>平面图</span>
              <div class="border-box">
                <img
                  v-if="detailInfo.price_url"
                  :src="detailInfo.price_url"
                  alt=""
                />
              </div>
            </div>
          </div>
        </div>
        <div slot="footer" class="dialog-footer" v-if="role_id == 2">
          <el-button @click="rejectByDetailId(detailInfo.id)">
            不通过
          </el-button>
          <el-button
            type="primary"
            @click="examineById(detailInfo.id, 1, 'show')"
          >
            通 过
          </el-button>
        </div>
      </el-dialog>
    </div>
    <div class="edit">
      <el-dialog
        title="编辑商业楼宇"
        :visible.sync="showEdit"
        @close="closeEdit"
      >
        <div class="ed-main">
          <div class="ed-left">
            <div>
              <span>楼宇名称</span>
              <el-input
                v-model="detailInfo.build_name"
                autocomplete="off"
                placeholder="请填写名称"
              ></el-input>
            </div>
            <div>
              <span>所属县区</span>
              <el-select
                v-model="detailInfo.district_name"
                clearable
                placeholder="请选择所属县区"
              >
                <el-option
                  v-for="item in district_options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </div>
            <div>
              <span>楼宇类型</span>
              <el-select
                v-model="detailInfo.build_type"
                clearable
                placeholder="请选择楼宇类型"
              >
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </div>

            <div>
              <span>详细地址</span>
              <el-input
                v-model="detailInfo.detail_address"
                autocomplete="off"
                placeholder="请填写详细地址"
              ></el-input>
            </div>
            <div>
              <span>建成时间</span>
              <el-date-picker
                v-model="detailInfo.construction_time"
                type="year"
                value-format="yyyy"
                placeholder="选择建成时间"
              >
              </el-date-picker>
              <!-- <el-input
              
                v-model="detailInfo.construction_time"
                autocomplete="off"
                placeholder="请填写建成时间"
              ></el-input> -->
            </div>
            <div>
              <span>联系人</span>
              <el-input
                v-model="detailInfo.linkman"
                autocomplete="off"
                placeholder="请填写联系人"
              ></el-input>
            </div>
            <div>
              <span>联系方式</span>
              <el-input
                v-model="detailInfo.link_mobile"
                autocomplete="off"
                placeholder="请填写联系方式"
              ></el-input>
            </div>

            <div>
              <span>招商优势</span>
              <el-input
                type="textarea"
                v-model="detailInfo.attract_advantage"
                autocomplete="off"
                placeholder="请填写招商优势"
              ></el-input>
            </div>
          </div>
          <div class="ed-center">
            <div>
              <span>总层数</span>
              <el-input
                v-model="detailInfo.layer_num"
                autocomplete="off"
                placeholder="请填写总层数"
              ></el-input>
            </div>
            <div>
              <span>拟招引业态</span>
              <el-input
                v-model="detailInfo.attract_status"
                autocomplete="off"
                placeholder="请填写拟招引业态"
              ></el-input>
            </div>
            <div>
              <span>合作模式</span>
              <el-select
                v-model="detailInfo.cooperation_model"
                clearable
                placeholder="请填写合作模式"
              >
                <el-option
                  v-for="item in mode_options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </div>

            <div>
              <span>总占地面积（m²）</span>
              <el-input
                v-model="detailInfo.cover_land_area"
                autocomplete="off"
                placeholder="请填写总占地面积"
              ></el-input>
            </div>
            <div class="flex-input">
              <div>
                <span>总建筑面积（m²）</span>
                <el-input
                  v-model="detailInfo.build_area"
                  autocomplete="off"
                  placeholder="请填写面积"
                ></el-input>
              </div>

              <div>
                <span>闲置面积（m²）</span>
                <el-input
                  v-model="detailInfo.empty_area"
                  autocomplete="off"
                  placeholder="请填写面积"
                ></el-input>
              </div>
            </div>
            <div class="flex-input">
              <div>
                <span>车位/个</span>
                <el-input
                  v-model="detailInfo.car_space_num"
                  autocomplete="off"
                  placeholder="请填写个数"
                ></el-input>
              </div>
              <div>
                <span>电梯/部</span>
                <el-input
                  v-model="detailInfo.lift_num"
                  autocomplete="off"
                  placeholder="请填写数量"
                ></el-input>
              </div>
            </div>
            <div class="flex-input">
              <div>
                <span>租金范围(元/m²/天)</span>
                <el-input
                  v-model="detailInfo.rent_money"
                  autocomplete="off"
                  placeholder="请填写"
                ></el-input>
              </div>
              <div>
                <span>物业费(元/m²/天)</span>
                <el-input
                  v-model="detailInfo.wuye_money"
                  autocomplete="off"
                  placeholder="请填写"
                ></el-input>
              </div>
            </div>

            <div>
              <span>优惠政策</span>
              <el-input
                type="textarea"
                v-model="detailInfo.policy"
                autocomplete="off"
                placeholder="请填写优惠政策"
              ></el-input>
            </div>
          </div>
          <div class="ed-right">
            <div class="imgs">
              <span>外部图片</span>
              <div>
                <el-upload
                  :class="[
                    isHiddenOutsidePlus == true ||
                    fileList_img_outside.length > 0
                      ? 'hidden'
                      : 'show',
                  ]"
                  action=""
                  ref="uploadImg"
                  list-type="picture-card"
                  accept=".png,.jpg,.jpeg,.gif,.webp"
                  :before-upload="beforeUploadImg"
                  :onChange="changeImgByOutside"
                  :http-request="upByImgByOutside"
                  :on-remove="handleRemoveByOutside"
                  :auto-upload="true"
                  :file-list="fileList_img_outside"
                >
                  <i class="el-icon-plus"></i>
                </el-upload>
              </div>
            </div>
            <div class="imgs">
              <span>内部图片</span>
              <div>
                <el-upload
                  :class="[
                    isHiddenInsidePlus == true || fileList_img_inside.length > 0
                      ? 'hidden'
                      : 'show',
                  ]"
                  action=""
                  ref="uploadImg"
                  list-type="picture-card"
                  accept=".png,.jpg,.jpeg,.gif,.webp"
                  :before-upload="beforeUploadImg"
                  :onChange="changeImgByInside"
                  :http-request="upByImgByInside"
                  :on-remove="handleRemoveByInside"
                  :auto-upload="true"
                  :file-list="fileList_img_inside"
                >
                  <i class="el-icon-plus"></i>
                </el-upload>
              </div>
            </div>
            <div class="imgs">
              <span>平面图</span>
              <div>
                <el-upload
                  :class="[
                    isHiddenPlanPlus == true || fileList_img_Plan.length > 0
                      ? 'hidden'
                      : 'show',
                  ]"
                  action=""
                  ref="uploadImg"
                  list-type="picture-card"
                  accept=".png,.jpg,.jpeg,.gif,.webp"
                  :before-upload="beforeUploadImg"
                  :onChange="changeImgByPlan"
                  :http-request="upByImgByPlan"
                  :on-remove="handleRemoveByPlan"
                  :auto-upload="true"
                  :file-list="fileList_img_Plan"
                >
                  <i class="el-icon-plus"></i>
                </el-upload>
              </div>
            </div>
          </div>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button @click="closeEdit">
            取 消
          </el-button>
          <el-button type="primary" @click="editDetailInfo">
            确 定
          </el-button>
        </div>
      </el-dialog>
    </div>
    <div class="bh">
      <el-dialog title="审核说明" :visible.sync="showBH">
        <div class="bh-tips">
          <span class="tips">审核未通过信息</span>
          <el-input
            type="textarea"
            :rows="2"
            placeholder="请输入内容"
            v-model="audit_message"
          >
          </el-input>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button @click="(showBH = false), (audit_message = '')">
            取 消
          </el-button>
          <el-button type="primary" @click="rejectByDetailId()">
            确 认
          </el-button>
        </div>
      </el-dialog>
    </div>
    <el-dialog
      class="import-box"
      title="数据导入"
      :visible.sync="showImport"
      @close="closeUpload"
    >
      <div class="upload">
        <span>附件上传：</span>
        <el-upload
          :class="['upload-demo']"
          ref="upload"
          action=""
          accept=".xlsx"
          :auto-upload="false"
          :before-upload="handBeforeUpload"
          :on-success="handSuccess"
          :http-request="httpRequest"
          :limit="1"
          :file-list="fileList"
          :show-file-list="false"
          :on-change="changeFile"
        >
          <el-button class="uploads" size="small" type="primary"
            >+选择文件</el-button
          >
          <div slot="tip" class="el-upload__tip">
            （上传文件的类型 xlsx）
          </div>
        </el-upload>
      </div>
      <div v-for="item of changeFileList" :key="item.name" class="file-list">
        <img
          v-if="
            item.name.split('.')[item.name.split('.').length - 1] == 'xls' ||
              item.name.split('.')[item.name.split('.').length - 1] == 'xlsx'
          "
          src="~@img/upload/icon-excel.png"
          alt=""
        />
        <img
          v-if="item.name.split('.')[item.name.split('.').length - 1] == 'pdf'"
          src="~@img/upload/icon-pdf.png"
          alt=""
        />
        <img
          v-if="item.name.split('.')[item.name.split('.').length - 1] == 'docx'"
          src="~@img/upload/icon-word.png"
          alt=""
        />

        <img src="" alt="" />
        <em class="name">{{ item.name }}</em>
        <em @click="lookFile(item)" class="img111">
          <img src="~@img/upload/icon-eye.png" alt="" />
          <em class="s">预览</em>
        </em>
        <em @click="delFile(item.uid)" class="img222">
          <img src="~@img/upload/icon-delete.png" alt="" />
          <em class="d">删除</em>
        </em>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeUpload">
          取 消
        </el-button>
        <el-button type="primary" @click="submitUpload">
          提 交
        </el-button>
      </div>
    </el-dialog>
    <el-dialog title="模板下载" :visible.sync="showTemplate">
      <div>
        <span class="tips">提示信息：是否下载该模板？</span>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="showTemplate = false">
          取 消
        </el-button>
        <el-button type="primary" @click="DownloadTemplate">
          确 认
        </el-button>
      </div>
    </el-dialog>
    <el-dialog title="导出提示" :visible.sync="showExport">
      <div>
        <span class="tips">提示信息：是否导出所选信息？</span>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="showExport = false">
          取 消
        </el-button>
        <el-button type="primary" @click="BatchExport">
          确 认
        </el-button>
      </div>
    </el-dialog>
    <el-dialog title="删除提示" :visible.sync="showDel">
      <div>
        <span class="tips">提示信息：是否批量删除选中信息？</span>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="showDel = false">
          取 消
        </el-button>
        <el-button type="primary" @click="deleteInfo"> 确 定 </el-button>
      </div>
    </el-dialog>
    <el-dialog title="批量审核提示" :visible.sync="showResources">
      <div>
        <span class="tips">提示信息：是否批量审核选中信息？</span>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="showResources = false">
          取 消
        </el-button>
        <el-button type="primary" @click="resources">
          确 认
        </el-button>
      </div>
    </el-dialog>
    <el-dialog title="驳回提示" :visible.sync="showReject">
      <div>
        <span class="tips">提示信息：是否驳回？</span>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="showReject = false">
          取 消
        </el-button>
        <el-button type="primary" @click="rejectById()">
          确 认
        </el-button>
      </div>
    </el-dialog>
    <div class="file-show" v-if="openFile">
      <div class="gb" @click="closeFileShow">
        关 闭
      </div>
      <iframe v-if="FileType == 'pdf'" :src="fileSrc" frameborder="0"></iframe>
      <div v-if="FileType == 'word'" ref="word" class="word"></div>
      <div v-if="FileType == 'xlsx'" class="xlsx">
        <div class="title">文件预览 --- {{ filename }} --- Sheet1</div>
        <div class="table-box table-view" v-html="excelData">
          <!-- <el-table :data="excelData">
            <el-table-column
              v-for="(value, key, index) in excelData[1]"
              :key="index"
              :prop="key"
              :label="key"
              :show-overflow-tooltip="true"
            ></el-table-column>
          </el-table> -->
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import XLSX from "@/utils/xlsx.full.min.js";
import {
  DownloadTemplate,
  UploadCarrierData,
  BatchDelete,
  BatchExport,
  BatchAudit,
  CheckDetail,
  CarrierEdit,
  SearchCarrier,
  UploadBuildPicture,
} from "@api/resources";
export default {
  data() {
    return {
      // 预览文件内容-start
      excelData: "加载中...",
      openFile: false,
      fileSrc: "",
      FileType: "",
      filename: "",
      changeFileList: [],
      // 预览文件内容-end
      permission: [],

      // 角色权限
      role_id: 0,
      value: "",
      // 上传文件
      fileList: [],
      isHiddenPlanPlus: false,
      isHiddenInsidePlus: false,
      isHiddenOutsidePlus: false,
      fileList_img_Plan: [],
      fileList_img_inside: [],
      fileList_img_outside: [],
      showBH: false,

      showInfo: false,
      showEdit: false,
      showImport: false,
      showTemplate: false,
      showExport: false,
      showDel: false,
      showResources: false,
      showReject: false,

      build_name: "",
      // owner: "",
      district_name: "",
      build_type: "",

      // 请求接口时保留参数
      option: {
        build_name: "",
        // owner: "",
        district_name: "",
        build_type: "",
      },
      currentPage: 1,
      per_page: 9,
      options: [
        { label: "商铺", value: "商铺" },
        { label: "写字楼", value: "写字楼" },
        { label: "其他", value: "其他" },
      ],
      mode_options: [
        { label: "出租", value: "出租" },
        { label: "出售", value: "出售" },
        { label: "转让", value: "转让" },
      ],

      district_options: [
        // { label: "太原市", value: "太原市" },
        { label: "小店区", value: "小店区" },
        { label: "迎泽区", value: "迎泽区" },
        { label: "杏花岭区", value: "杏花岭区" },
        { label: "万柏林区", value: "万柏林区" },
        { label: "尖草坪区", value: "尖草坪区" },
        { label: "晋源区", value: "晋源区" },
        { label: "古交市", value: "古交市" },
        { label: "清徐县", value: "清徐县" },
        { label: "阳曲县", value: "阳曲县" },
        { label: "娄烦县", value: "娄烦县" },
        // { label: "综改示范区", value: "综改示范区" },
        { label: "中北高新区", value: "中北高新区" },
        { label: "西山示范区", value: "西山示范区" },
        { label: "清徐开发区", value: "清徐开发区" },
        { label: "阳曲示范区", value: "阳曲示范区" },
      ],
      total: 0,
      listInfo: [],
      selectListId: [],
      detailInfo: {},
      // 即将被驳回详情id
      rejectDetailId: "",
      // 驳回信息
      audit_message: "",
      // 即将被驳回id
      rejectId: "",
      token: "",
    };
  },
  mounted() {
    this.permission = localStorage.getItem("funcList").split(",");
    this.role_id = this.$store.state.role_id;
    this.token = localStorage.getItem("login");

    this.SearchCarrier();
  },
  methods: {
    closeFileShow() {
      this.openFile = false;
      this.fileSrc = "";
      this.excelData = '加载中...';

    },
    showImportBox() {
      if (this.permission.includes("1") == false) {
        this.$message.warning("暂无权限，请联系管理员！");
        return;
      }
      this.showImport = true;
    },

    showTemplateBox() {
      if (this.permission.includes("2") == false) {
        this.$message.warning("暂无权限，请联系管理员！");
        return;
      }
      this.showTemplate = true;
    },
    showExportBox() {
      if (this.permission.includes("3") == false) {
        this.$message.warning("暂无权限，请联系管理员！");
        return;
      }
      this.showExport = true;
    },
    showResourcesBox() {
      if (this.permission.includes("6") == false) {
        this.$message.warning("暂无权限，请联系管理员！");
        return;
      }
      this.showResources = true;
    },
    showDelBox() {
      if (this.permission.includes("4") == false) {
        this.$message.warning("暂无权限，请联系管理员！");
        return;
      }
      this.showDel = true;
    },
    // 获取查看和修改详情
    async CheckDetail(id, type) {
      let res = await CheckDetail({ id, carrier_type: 1 });
      if (res.data.length > 0 && type == "edit") {
        this.isHiddenPlanPlus = false;
        this.isHiddenInsidePlus = false;
        this.isHiddenOutsidePlus = false;
        this.fileList_img_Plan = res.data[0].price_url;
        this.fileList_img_inside = res.data[0].inside_picture_url;
        this.fileList_img_outside = res.data[0].outer_picture_url;

        if (res.data[0].price_url.length > 0) {
          res.data[0].price_url = res.data[0].price_url[0].url;
        } else {
          res.data[0].price_url = "";
        }
        if (res.data[0].inside_picture_url.length > 0) {
          res.data[0].inside_picture_url =
            res.data[0].inside_picture_url[0].url;
        } else {
          res.data[0].inside_picture_url = "";
        }
        if (res.data[0].outer_picture_url.length > 0) {
          res.data[0].outer_picture_url = res.data[0].outer_picture_url[0].url;
        } else {
          res.data[0].outer_picture_url = "";
        }
        this.detailInfo = res.data[0];
      } else if (res.data.length > 0 && type == "show") {
        if (res.data[0].price_url.length > 0) {
          res.data[0].price_url = res.data[0].price_url[0].url;
        } else {
          res.data[0].price_url = "";
        }
        if (res.data[0].inside_picture_url.length > 0) {
          res.data[0].inside_picture_url =
            res.data[0].inside_picture_url[0].url;
        } else {
          res.data[0].inside_picture_url = "";
        }
        if (res.data[0].outer_picture_url.length > 0) {
          res.data[0].outer_picture_url = res.data[0].outer_picture_url[0].url;
        } else {
          res.data[0].outer_picture_url = "";
        }
        this.detailInfo = res.data[0];
        this.fileList_img_Plan = [];
        this.fileList_img_inside = [];
        this.fileList_img_outside = [];
      } else {
        this.$message.error(res.msg);
      }
    },
    ClearOption() {
      this.build_name = "";
      // this.owner = "";
      this.district_name = "";
      this.build_type = "";
      this.option = {
        build_name: this.build_name,
        // owner: this.owner,
        district_name: this.district_name,
        build_type: this.build_type,
        build_name: "",
      };
      this.currentPage = 1;
      this.SearchCarrier();
    },
    searchByOption() {
      this.option = {
        build_name: this.build_name,
        // owner: this.owner,
        district_name: this.district_name,
        build_type: this.build_type,
      };
      this.currentPage = 1;
      this.SearchCarrier();
    },
    // 展示数据
    async SearchCarrier() {
      let res = await SearchCarrier({
        token: this.token,
        page: this.currentPage,
        per_page: this.per_page,
        build_name: this.option.build_name,
        // owner: this.option.owner,
        district_name: this.option.district_name,
        build_type: this.option.build_type,
      });
      if (res.code && res.code != 0) {
        this.listInfo = [];
        this.total = 0;
      } else {
        this.listInfo = res.data.map((item, index) => {
          return { ...item, index: index + 1 };
        });
        this.total = res.size;
      }
    },

    // 下载模板
    async DownloadTemplate() {
      let res = await DownloadTemplate({ template_type: 1, token: this.token });
      window.open(res);
      this.showTemplate = false;
    },

    // 上传文件前的验证
    handBeforeUpload(file, fileList) {
      this.fileName = file.name;
      const isExcel =
        file.name.split(".")[file.name.split(".").length - 1] === "xlsx";
      // const isSize = file.size / 1024 / 1024 < 10;
      if (!isExcel) {
        this.$message({
          message: "只能上传xlsx文件!",
          type: "warning",
          showClose: true,
        });
      }
      // if (!isSize) {
      //   this.$message({
      //     message: "上传文件大小不能超过 10MB!",
      //     type: "warning",
      //     showClose: true,
      //   });
      // }
      // return isExcel && isSize;
      return isExcel;
    },
    // 关闭导入
    closeShow() {
      this.detailInfo = [];
      this.showInfo = false;
    },
    // 关闭导入
    closeUpload() {
      this.fileList = [];
      this.changeFileList = [];
      this.showImport = false;
    },
    // 点击确认，提交到后端
    submitUpload() {
      this.$refs.upload.submit();
    },
    changeFile(file, fileList) {
      this.fileList = fileList;
      this.changeFileList = fileList;
    },
    lookFile(item) {
      if (item.name.includes("pdf")) {
        this.FileType = "pdf";
        let url = window.URL.createObjectURL(item.raw);
        this.fileSrc = url;
        this.openFile = true;
        console.log(this.fileSrc);
      } else if (item.name.includes("docx")) {
        this.FileType = "pdf";
        this.openFile = true;
        this.$nextTick(() => {
          docx.renderAsync(item.raw, this.$refs.word);
        });
      } else {
        this.FileType = "xlsx";
        this.readWorkbookFromFile(item);
        this.openFile = true;
      }
    },
    delFile(uid) {
      this.changeFileList.map((item, index) => {
        if (item.uid == uid) {
          let a = this.changeFileList.splice(index, 1);
          console.log(a);
        }
      });
    },
    readWorkbookFromFile(data) {
      this.filename = data.name;
      let reader = new FileReader();
      reader.readAsArrayBuffer(data.raw);
      let that = this;
      reader.onload = function(readRes) {
        var workbook = XLSX.read(readRes.target.result, { type: "array" });
        var sheetNames = workbook.SheetNames;
        var worksheet = workbook.Sheets[sheetNames[0]];
        // that.excelData = XLSX.utils.sheet_to_json(worksheet);
        that.excelData = XLSX.utils
          .sheet_to_html(worksheet)
          .replace(
            '<html><head><meta charset="utf-8"/><title>SheetJS Table Export</title></head><body>',
            ""
          )
          .replace("</body></html>", "");
        // console.log(XLSX.utils.sheet_to_json(worksheet));
        // console.log(XLSX.utils.sheet_to_row_object_array(worksheet));
      };
    },
    // 导入文件
    async httpRequest(params) {
      let fd = new FormData();
      fd.append("file", params.file);
      fd.append("token", this.token);
      fd.append("carrier_type", 1);
      let res = await UploadCarrierData(fd);
      if (res.code == 0) {
        this.SearchCarrier();
        this.$message.success(res.msg);
        this.fileList = [];
        this.changeFileList = [];
        this.showImport = false;
      } else {
        this.$message.error(res.msg);
      }
    },
    // 上传成功提示
    handSuccess() {
      console.log("success");
    },

    // 上传图片改变
    changeImgByInside(file, fileList) {
      if (fileList.length > 0) {
        this.isHiddenInsidePlus = true;
      } else {
        this.isHiddenInsidePlus = false;
      }
    },
    changeImgByOutside(file, fileList) {
      if (fileList.length > 0) {
        this.isHiddenOutsidePlus = true;
      } else {
        this.isHiddenOutsidePlus = false;
      }
    },
    changeImgByPlan(file, fileList) {
      if (fileList.length > 0) {
        this.isHiddenPlanPlus = true;
      } else {
        this.isHiddenPlanPlus = false;
      }
    },
    // 上传图片前的验证
    beforeUploadImg(file, fileList) {
      this.fileName = file.name;
      const isImg =
        file.name.split(".")[1] === "png" ||
        file.name.split(".")[1] === "jpg" ||
        file.name.split(".")[1] === "jpeg" ||
        file.name.split(".")[1] === "webp" ||
        file.name.split(".")[1] === "gif";
      // const isSize = file.size / 1024 / 1024 < 10;
      if (!isImg) {
        this.$message({
          message: "只能上传png、jpg、jpeg、gif或webp文件!",
          type: "warning",
          showClose: true,
        });
      }
      // if (!isSize) {
      //   this.$message({
      //     message: "上传文件大小不能超过 10MB!",
      //     type: "warning",
      //     showClose: true,
      //   });
      // }
      // return isExcel && isSize;
      return isImg;
    },
    // 上传图片
    async upByImgByInside(params) {
      let fd = new FormData();
      fd.append("img_name", params.file.name);
      fd.append("img_file", params.file);
      fd.append("carrier_id", this.detailInfo.id);
      fd.append("img_flag", 1);
      fd.append("token", this.token);
      fd.append("carrier_type", 1);

      let res = await UploadBuildPicture(fd);
      if (res.code == 0) {
        this.$message.success(res.msg);
      } else {
        this.$message.error(res.msg);
      }
    },
    async upByImgByOutside(params) {
      let fd = new FormData();
      fd.append("img_name", params.file.name);
      fd.append("img_file", params.file);
      fd.append("carrier_id", this.detailInfo.id);
      fd.append("img_flag", 2);
      fd.append("token", this.token);
      fd.append("carrier_type", 1);

      let res = await UploadBuildPicture(fd);
      if (res.code == 0) {
        this.$message.success(res.msg);
      } else {
        this.$message.error(res.msg);
      }
    },
    async upByImgByPlan(params) {
      let fd = new FormData();
      fd.append("img_name", params.file.name);
      fd.append("img_file", params.file);
      fd.append("carrier_id", this.detailInfo.id);
      fd.append("img_flag", 3);
      fd.append("token", this.token);
      fd.append("carrier_type", 1);

      let res = await UploadBuildPicture(fd);
      if (res.code == 0) {
        this.$message.success(res.msg);
      } else {
        this.$message.error(res.msg);
      }
    },
    // 删除已上传图片
    handleRemoveByInside(file, fileList) {
      this.fileList_img_inside = fileList;
      if (fileList.length > 0) {
        this.isHiddenInsidePlus = true;
      } else {
        this.isHiddenInsidePlus = false;
      }
    },
    handleRemoveByOutside(file, fileList) {
      this.fileList_img_outside = fileList;
      if (fileList.length > 0) {
        this.isHiddenOutsidePlus = true;
      } else {
        this.isHiddenOutsidePlus = false;
      }
    },
    handleRemoveByPlan(file, fileList) {
      this.fileList_img_Plan = fileList;
      if (fileList.length > 0) {
        this.isHiddenPlanPlus = true;
      } else {
        this.isHiddenPlanPlus = false;
      }
    },
    // 关闭修改按钮
    closeEdit() {
      this.showEdit = false;
      this.detailInfo = [];
      this.fileList_img_inside = [];
      this.fileList_img_outside = [];
      this.fileList_img_Plan = [];
    },
    // 修改编辑详情
    async editDetailInfo() {
      let res = await CarrierEdit({ ...this.detailInfo, token: this.token });
      if (res.code == 0) {
        this.showEdit = false;
        this.fileList_img_inside = [];
        this.fileList_img_outside = [];
        this.fileList_img_Plan = [];

        this.SearchCarrier();
        this.$message.success("修改成功");
      } else {
        this.$message.error(res.msg);
      }
    },
    // 批量删除
    async deleteInfo() {
      if (this.selectListId.length == 0) {
        this.showDel = false;
        this.$message.warning("请选择要删除的信息！");
        return;
      }
      let arr = this.selectListId;
      let res = await BatchDelete({
        delete_id_list: arr,
        token: this.token,
        carrier_type: 1,
      });
      if (res.code == 0) {
        this.selectListId = [];
        this.$refs.multipleTable.clearSelection();
        this.showDel = false;
        this.$message.success(res.msg);
        this.afterDelete();
      } else {
        this.$message.error(res.msg);
      }
    },
    async afterDelete() {
      let res = await SearchCarrier({
        token: this.token,
        page: this.currentPage,
        per_page: this.per_page,
        build_name: this.option.build_name,
        // owner: this.option.owner,
        district_name: this.option.district_name,
        build_type: this.option.build_type,
      });
      if (res.code == 0 && res.msg == "查询数据库错误！") {
        if (this.currentPage > 1) {
          this.currentPage--;
          this.afterDelete();
        }
      } else if (res.code && res.code != 0) {
        this.listInfo = [];
        this.total = 0;
      } else {
        this.listInfo = res.data.map((item, index) => {
          return { ...item, index: index + 1 };
        });
        this.total = res.size;
      }
    },
    // 批量导出
    async BatchExport() {
      if (this.selectListId.length == 0) {
        this.showExport = false;
        this.$message.warning("请选择要导出的信息！");
        return;
      }
      let arr = this.selectListId;
      let res = await BatchExport({ select_id_list: arr, token: this.token });
      if (res.code == 0) {
        this.showExport = false;
        this.selectListId = [];
        this.$refs.multipleTable.clearSelection();
        window.open(res.url);
        this.$message.success(res.msg);
      } else {
        this.$message.error(res.msg);
      }
    },
    // 批量审核  与审核
    async resources() {
      if (this.selectListId.length == 0) {
        this.showResources = false;
        this.$message.warning("请选择要审核的信息！");
        return;
      }
      let arr = this.selectListId;
      let res = await BatchAudit({
        token: this.token,
        audit_flag: 1,
        audit_id_list: arr,
        audit_message: "",
        carrier_type: 1,
      });
      if (res.code == 0) {
        this.showResources = false;
        this.selectListId = [];
        this.$refs.multipleTable.clearSelection();
        this.SearchCarrier();
        this.$message.success(res.msg);
      } else {
        this.$message.error(res.msg);
      }
    },
    // 修改详情获取
    editDetail(id) {
      if (this.permission.includes("5") == false) {
        this.$message.warning("暂无权限，请联系管理员！");
        return;
      }
      this.CheckDetail(id, "edit");
      this.showEdit = true;
    },
    // 查看详情数据获取
    showDetail(id) {
      if (this.permission.includes("6") == false) {
        this.$message.warning("暂无权限，请联系管理员！");
        return;
      }
      this.CheckDetail(id, "show");
      this.showInfo = true;
    },
    // 驳回
    async rejectById(id) {
      if (this.permission.includes("7") == false) {
        this.$message.warning("暂无权限，请联系管理员！");
        return;
      }
      if (id) {
        this.rejectId = id;
        this.showReject = true;
      } else {
        let res = await BatchAudit({
          audit_flag: 3,
          audit_id_list: [this.rejectId],
          audit_message: "",
          token: this.token,
          carrier_type: 1,
        });
        if (res.code == 0) {
          this.showReject = false;
          this.rejectId = "";
          this.SearchCarrier();
          this.$message.success("已驳回！");
        } else {
          this.$message.error(res.msg);
        }
      }
    },

    async rejectByDetailId(id) {
      if (id) {
        this.rejectDetailId = id;
        this.showBH = true;
      } else {
        if (this.audit_message == "") {
          this.$message.warning("请填写驳回信息！");
          return;
        }
        let res = await BatchAudit({
          audit_flag: 4,
          audit_id_list: [this.rejectDetailId],
          audit_message: this.audit_message,
          token: this.token,
          carrier_type: 1,
        });
        if (res.code == 0) {
          this.audit_message = "";
          this.showBH = false;
          this.showInfo = false;
          this.SearchCarrier();
          this.$message.success("操作成功！");
        } else {
          this.$message.error(res.msg);
        }
      }
    },
    // 审核
    async examineById(id, audit_flag, audit_message) {
      let res = await BatchAudit({
        audit_flag,
        audit_id_list: [id],
        audit_message,
        token: this.token,
        carrier_type: 1,
      });
      if (res.code == 0) {
        this.showInfo = false;
        this.SearchCarrier();
        this.$message.success(res.msg);
      } else {
        this.$message.error(res.msg);
      }
    },
    // 切换每页数据量
    handleSizeChange(val) {
      this.currentPage = 1;
      this.per_page = val;
      this.SearchCarrier();
    },
    // 切换分页
    handleCurrentChange(val) {
      this.currentPage = val;
      this.SearchCarrier();
    },
    // 表格选择项
    handleSelectionChange(selection) {
      this.selectListId = selection.map((item) => {
        return item.id;
      });
    },
  },
};
</script>

<style lang="less" scoped>
/deep/ .el-dialog__body span.el-upload-list__item-actions {
  width: 100%;
}
/deep/ .bh .el-dialog {
  z-index: 9999;
  text-align: left;
}
/deep/ .el-textarea {
  width: 360px;
  height: 110px;
  display: inline-block;
  background: #f7f7f7;
  vertical-align: top;
  resize: none;
}
/deep/ .el-textarea.is-disabled .el-textarea__inner {
  background: #f7f7f7;
}
/deep/ .el-textarea__inner {
  display: inline-block;
  width: 360px;
  height: 110px;
  background: #f7f7f7;
  border-radius: 8px;
  border: 0;
  color: #999;
  font-size: 18px;
  font-weight: normal;
  resize: none;
}
.bh-tips {
  display: flex;
  width: 600px;
  margin: 0 auto;
}
.el-textarea__inner:focus {
  outline: 0;
  border-color: none;
}
/deep/ .edit .el-dialog {
  width: 1789px;
  height: 840px;
  margin-top: -420px !important;
  margin-left: -894.5px;
}
/deep/ .import-box .el-dialog {
  height: 360px;
  margin-top: -180px !important;
}
/deep/ .import-box .el-dialog__footer {
  padding: 0 0 30px;
}
/deep/ .import-box .el-dialog__body {
  height: 200px;
}
/deep/ .edit .el-dialog__header {
  width: 1530px;
}
/deep/ .edit .el-dialog__body {
  margin: 0 auto;
  width: 1530px;
  height: 640px;
}
/deep/ .edit .el-dialog__body .ed-main {
  width: 1530px;
  height: 640px;
  overflow: hidden;
  display: flex;
}
.ed-main > div {
  flex: 1;
}
.ed-main > div span {
  vertical-align: middle;
}
/deep/ .ed-main > div .el-input {
  width: 360px;
  margin-bottom: 20px;
}
.ed-main .left {
  margin-right: 60px;
}
.ed-main .center {
  width: 1530px;
  margin-right: 60px;
}
.ed-main .imgs {
  display: flex;
  margin-bottom: 20px;
  height: 200px;
  overflow: hidden;
  img {
    display: block;
    width: 350px;
    height: 200px;
  }
  /deep/ .el-upload {
    position: relative;
  }
  /deep/ .el-icon-delete,
  /deep/ .el-icon-plus {
    font-size: 36px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -20px;
    margin-left: -18px;
    color: #eee;
  }
  /deep/ .el-icon-plus {
    color: #999;
  }
}

/deep/ .el-upload-list--picture-card .el-upload-list__item {
  display: block;
  width: 350px;
  height: 200px;
}
/deep/ .el-upload-list--picture-card .el-upload-list__item-actions:hover {
  width: 350px;
  height: 200px;
}
.ed-main {
  text-align: left;
  display: flex;
}
.upload {
  width: 610px;
  margin: 0 auto;
  display: flex;
}
.upload > span {
  flex: 0 0 158px;
}
.upload .upload-demo {
  flex: 1;
  position: relative;
  text-align: left;
}
// /deep/.upload .upload-demo .el-upload-list {
//   // position: absolute;
//   // top: 0;
//   // left: 180px;
//   // position: relative;
//   // top: -68px;
//   // width: 248px;
//   // left: 180px;
// }
/deep/ .el-dialog .el-button--primary.uploads {
  width: 138px;
  height: 38px;
  line-height: 0;
  border-radius: 4px;
  background: #446db3;
}
/deep/ .el-dialog .el-button--primary.uploads span {
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #ffffff;
}

/deep/
  .el-table--striped
  .el-table__body
  tr.el-table__row--striped.el-table__row--striped.el-table__row--striped
  td {
  background: #f7faff;
}
.portrait_body {
  width: 100%;
  background: #fafafa;
  height: 100%;
}
.portrait_main {
  margin: 0 auto;
  width: 100%;
  //width: 1500px;
  height: 100%;
  // background: #fff;
}
/deep/ .el-tabs__nav-wrap {
  background: #ffffff;
}

.option {
  display: flex;
  // flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  li {
    flex: 0 0 18%;

    display: flex;
    justify-content: start;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #333333;
    margin-bottom: 20px;
    label {
      width: 120px;
      line-height: 32px;
      margin-right: 10px;
      text-align: right;
    }
    &:last-of-type {
      justify-content: start;
    }
  }
}
/deep/ .el-pagination .btn-next,
/deep/ .el-pagination .btn-prev {
  background-color: transparent;
}
/deep/ .el-pagination .btn-next i,
/deep/ .el-pagination .btn-prev i {
  background: #fafafa;
  box-shadow: 0px 0px 4px 0px rgba(86, 86, 86, 0.11);
  border-radius: 6px;
}
/deep/ .el-table--border th {
  border-right: none;
  background: #446db3 !important;
  color: #fff;
}
.add {
  float: left;
  margin: 0 30px 30px 0;
  width: 120px;
  height: 38px;
  line-height: 38px;
  text-align: center;
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #ffffff;
  background: #f89718;
  border-radius: 4px;
  cursor: pointer;
}
.del {
  float: right;
  margin: 0 0 30px 30px;
  background: #f15847;
}
.examine {
  float: right;
  margin: 0 0 30px 30px;
  background: #f15847;
}
.flex-from-last .title {
  text-align: left;
  font-weight: bold;
  color: #333;
  font-size: 16px;
  padding: 20px 10px;
}
/deep/ .dialog_box .flex-from-last .el-input {
  width: 140px;
}

/deep/ .el-dialog__body .flex-from-last span {
  width: 130px;
  font-size: 16px;
}
/deep/ .el-dialog__body .flex-from-last .pro_name .el-input {
  width: 680px;
}
.el-dialog__body .flex-from-last .pro_name span {
  font-weight: bold;
}
.flex_dialog {
  display: flex;
  .flex-steps {
    flex: 0 0 150px;
    height: 650px;
  }
  .flex-from {
    flex: 1;
  }
}
/deep/ .el-dialog__body .pro_plus span {
  width: 200px;
}
/deep/.dialog_box .pro_plus .el-input {
  width: 400px;
}
.pro_plus .pos_f .pos {
  right: 120px;
}
/deep/.el-dialog__body .el-select__tags span span {
  width: 120px;
  span {
    width: 80px;
  }
}
/deep/ .el-select .el-tag__close.el-icon-close {
  top: -5px;
}
/deep/ .el-steps--vertical {
  margin-top: 75px;
  margin-left: 30px;
  height: 60%;
  flex-flow: column;
  // margin-left: 80px;
}

/deep/.el-step__icon.is-text {
  width: 40px;
  height: 40px;
  background: #3576f0;
  border-radius: 50%;
  color: #fff;
  border: 2px solid #eaf1fd;
}
/deep/.is-process .el-step__icon.is-text,
/deep/.is-wait .el-step__icon.is-text {
  width: 40px;
  height: 40px;
  background: #cccccc;
  border-radius: 50%;
  border: 2px solid #eeeeee;
}
// 线样式
// /deep/ .is-finish .el-step__line-inner {
//   border-width: 2px !important;
// }
/deep/ .el-step.is-vertical .el-step__line {
  width: 2px;
  top: 42px;
  left: 18px;
}
/deep/ .el-step.is-vertical .el-step__head {
  flex: 0 0 40px;
  width: 24px;
}
/deep/ .el-step__line {
  top: 40px;
  width: 4px;
  height: 72px;
  border-radius: 2px;
}
// 文字样式

/deep/ .el-step.is-vertical .el-step__title {
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  line-height: 40px;
}
/deep/.el-step__title.is-finish {
  color: #3576f0;
}
/deep/.el-step__title.is-process,
/deep/.el-step__title.is-wait {
  color: #999999;
}
/deep/ .table_select .el-select .el-input__inner {
  width: 88px;
  height: 24px;
  background: #ffffff;
  border: 1px solid #cccccc;
  border-radius: 5px;
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #666666;
}

/deep/ .table_select .el-input__icon {
  line-height: 24px;
}
/deep/ .table_select .el-icon-arrow-up:before {
  display: inline-block;
  width: 14px;
  height: 8px;
  content: "";
  background: url("~@img/portrait/icon-select-down.png") no-repeat center;
}
/deep/ .table_select .el-select .el-input .el-select__caret {
  transform: rotateZ(0);
  -moz-transform: rotateZ(0);
  -webkit-transform: rotateZ(0);
  -o-transform: rotateZ(0);
}
/deep/ .table_select .el-select .el-input .el-select__caret.is-reverse {
  transform: rotateZ(180deg);
  -moz-transform: rotateZ(180deg);
  -webkit-transform: rotateZ(180deg);
  -o-transform: rotateZ(180deg);
}
/deep/ .el-button--warning {
  background-color: #f89718;
  border-color: #f89718;
}
/deep/ .el-button--primary {
  background-color: #446db3;
  border-color: #446db3;
}
/deep/ .el-button--danger {
  background-color: #f15847;
  border-color: #f15847;
}
// 修改输入框
/deep/ .option .el-input {
  width: 88%;
  height: 32px;
  line-height: 32px;
}

/deep/ .option .el-input__inner {
  background: #ffffff;
  border: 1px solid #cccccc;
  border-radius: 5px;
  height: 32px;
  line-height: 32px;
}
// 修改选择框
/deep/ .option .el-input__icon {
  line-height: 32px;
}
//
/deep/ .option .el-icon-arrow-up:before {
  display: inline-block;
  width: 14px;
  height: 8px;
  content: "";
  background: url("~@img/portrait/icon-select-down.png") no-repeat center;
}
/deep/ .option .el-select .el-input .el-select__caret {
  transform: rotateZ(0);
  -moz-transform: rotateZ(0);
  -webkit-transform: rotateZ(0);
  -o-transform: rotateZ(0);
}
/deep/ .option .el-select .el-input .el-select__caret.is-reverse {
  transform: rotateZ(180deg);
  -moz-transform: rotateZ(180deg);
  -webkit-transform: rotateZ(180deg);
  -o-transform: rotateZ(180deg);
}
// 修改按钮
/deep/ .option .el-button {
  width: 100px;
  height: 32px;
  line-height: 8px;
  text-align: center;
  border-radius: 4px;
}
/deep/ .option .el-button:first-of-type {
  background: #446db3;
  color: #fff;
}
/deep/ .option .el-button:last-of-type {
  color: #446db3;
  border-color: #446db3;
}
// 选项卡样式修改
/deep/.el-tabs__item {
  padding: 0 50px;
  font-size: 20px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #333333;
  height: 60px;
  line-height: 60px;
}
/deep/.el-tabs__item.is-active {
  font-weight: bold;
  color: #446db3;
}

/deep/.el-tabs__active-bar {
  height: 4px;
  background: #446db3;
}
/deep/ .el-tabs__nav-wrap {
  box-shadow: 0px 2px 6px 0px rgba(4, 0, 0, 0.1);
}
/deep/ .el-tabs__nav-wrap::after {
  height: 0;
}
/deep/.el-tabs__header {
  margin: 0;
}
/deep/.el-tabs {
  height: 100%;
  .el-tabs__content {
    box-sizing: border-box;
    height: calc(100% - 60px);
    padding: 30px 30px 20px;
    overflow: unset;
  }
}
/deep/.el-tabs__nav-scroll {
  padding-left: 30px;
}

//// 表格样式修改
/deep/.el-table--striped
  .el-table__body
  tr.el-table__row--striped
  td.el-table__cell {
  background: #f7faff;
}

/deep/.el-table__header .has-gutter tr th {
  height: 48px;
  background: #446db3 !important;
  color: #fff;
  border-right: 0;
}
/deep/.el-table tr {
  height: 48px;
  font-size: 14px;
  background-color: #fff;
}
/deep/.el-table .el-table__cell {
  height: 48px;
  padding: 0;

  .cell {
    height: 48px;
    line-height: 48px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

// 表格分页样式修改
.el-pagination {
  text-align: right;
  margin-top: 20px;
}
/deep/ .el-pager li {
  width: 30px;
  height: 30px;
  line-height: 30px;
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #666666;
  background: #fafafa;
  box-shadow: 0px 0px 4px 0px rgba(86, 86, 86, 0.11);
  border-radius: 6px;
  margin: 0 8px;
}

/deep/ .el-pager li.active {
  color: #fff;
  background: #446db3;
  box-shadow: 0px 0px 3px 0px rgba(0, 50, 89, 0.4);
  border-radius: 6px;
}

/deep/ .el-pagination .el-icon-arrow-right:before {
  content: "";
  display: inline-block;
  width: 30px;
  height: 30px;
  background: url("~@img/atlas/icon-page-right.png") no-repeat center;
}
/deep/
  .el-pagination
  button:disabled.btn-next:hover
  .el-icon-arrow-right:before {
  content: "";
  display: inline-block;
  width: 30px;
  height: 30px;
  background: url("~@img/atlas/icon-page-right.png") no-repeat center;
}
/deep/.el-pagination .btn-next:hover .el-icon-arrow-right:before {
  background: url("~@img/atlas/sidenav-hover2.png") no-repeat center;
}
/deep/ .el-pagination .el-icon-arrow-left:before {
  content: "";
  display: inline-block;
  width: 30px;
  height: 30px;
  background: url("~@img/atlas/icon-page-left.png") no-repeat center;
}
/deep/
  .el-pagination
  button:disabled.btn-prev:hover
  .el-icon-arrow-left:before {
  content: "";
  display: inline-block;
  width: 30px;
  height: 30px;
  background: url("~@img/atlas/icon-page-left.png") no-repeat center;
}
/deep/.el-pagination .btn-prev:hover .el-icon-arrow-left:before {
  background: url("~@img/atlas/sidenav-hover1.png") no-repeat center;
}
/deep/.pagination .el-select .el-input.is-focus .el-input__inner {
  height: 30px;
  border-color: #fafafa;
  background: #fafafa;
  box-shadow: 0px 0px 4px 0px rgba(86, 86, 86, 0.11);
  border-radius: 6px;
}
/deep/.pagination .el-input__inner {
  height: 30px;
  color: #666;
  border-color: #fafafa;
  background: #fafafa;
  box-shadow: 0px 0px 4px 0px rgba(86, 86, 86, 0.11);
  border-radius: 6px;
}
/deep/.pagination .el-pagination__sizes .el-input .el-input__inner:hover {
  height: 30px;
  border-color: #fafafa;
  background: #fafafa;
  box-shadow: 0px 0px 4px 0px rgba(86, 86, 86, 0.11);
  border-radius: 6px;
}
/deep/ .el-pagination__jump {
  height: 30px;
  line-height: 30px;
}
/deep/.pagination .el-pagination__jump .el-input__inner {
  color: #ccc;
}
/deep/.pagination .el-pagination__jump .el-input__inner.active {
  color: #666;
}
/deep/.el-pagination__jump .el-input__inner:focus {
  color: #666;
}
// 输入框修改
/deep/.dialog_box .el-input {
  width: 460px;
  height: 50px;
  line-height: 50px;
  margin-bottom: 20px;
}
/deep/.dialog_box .el-input__inner {
  border-radius: 8px;
}
/deep/.dialog_box .el-input__inner:focus {
  background: #ffffff;
  border-radius: 8px;
  border-color: #446db3;
  outline: 0;
}
/deep/.dialog_box .el-input.is-disabled .el-input__inner {
  background: #f9f9f9;
  border-color: #f9f9f9;
  cursor: not-allowed;
}

// 多选框

/deep/ .el-checkbox__input {
  box-sizing: border-box;
  width: 14px;
  height: 14px;
  line-height: 10px;
  background: #ffffff;
  border: 1px solid #cccccc;
}

/deep/ .el-checkbox__input .el-checkbox__inner {
  width: 8px;
  height: 8px;
  border: 0;
}

/deep/ .el-checkbox__input.is-checked,
.el-checkbox__input.is-indeterminate {
  border-color: #446db3;
}

/deep/ .el-checkbox__input.is-indeterminate .el-checkbox__inner {
  background-color: transparent;
  border-color: transparent;
}
/deep/ .el-checkbox__inner::after,
/deep/ .el-checkbox__input.is-indeterminate .el-checkbox__inner::before {
  content: none;
}
/deep/ .el-checkbox__input.is-checked .el-checkbox__inner {
  background-color: #446db3;
  border-color: #446db3;
}

/deep/ .dialog_box .el-icon-arrow-up:before {
  display: inline-block;
  width: 14px;
  height: 8px;
  content: "";
  background: url("~@img/portrait/icon-select-down.png") no-repeat center;
}
/deep/ .dialog_box .el-select .el-input .el-select__caret {
  transform: rotateZ(0);
  -moz-transform: rotateZ(0);
  -webkit-transform: rotateZ(0);
  -o-transform: rotateZ(0);
}
/deep/ .dialog_box .el-select .el-input .el-select__caret.is-reverse {
  transform: rotateZ(180deg);
  -moz-transform: rotateZ(180deg);
  -webkit-transform: rotateZ(180deg);
  -o-transform: rotateZ(180deg);
}

// 设置弹框
// 园区
/deep/ .edit_dialog1 .el-dialog {
  width: 1010px;
  height: 900px;
  margin-left: -505px !important;
  margin-top: -450px !important;
}
// 土地
/deep/ .edit_dialog2 .el-dialog {
  width: 1010px;
  height: 630px;
  margin-left: -505px !important;
  margin-top: -315px !important;
}
// 楼宇
/deep/ .edit_dialog3 .el-dialog {
  width: 1010px;
  height: 550px;
  margin-left: -505px !important;
  margin-top: -275px !important;
}
// 厂房
/deep/ .edit_dialog4 .el-dialog {
  width: 1010px;
  height: 690px;
  margin-left: -505px !important;
  margin-top: -345px !important;
}
/deep/ .dispatch_box .el-dialog {
  height: 600px;
  margin-top: -300px !important;
}
/deep/ .report_box .el-dialog {
  height: 580px;
  margin-top: -290px !important;
}
/deep/ .dialog_box .el-input__inner:focus {
  background: #f7f7f7;
  border-radius: 8px;
  border-color: #446db3;
  outline: 0;
}
/deep/ .dialog_box .pro_name .el-input {
  width: 580px;
}
/deep/ .dialog_box .el-input {
  width: 240px;
}
.flex_box {
  display: flex;
  justify-content: center;
}
.pos_f {
  position: relative;
  /deep/ .el-input__inner {
    padding: 0 40px 0 10px;
  }
  .pos {
    position: absolute;
    right: 10px;
    top: 12px;
    font-size: 18px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #999999;
  }
}
.pos_f_input {
  /deep/ .el-input__inner {
    padding: 0 92px 0 10px;
  }
}
// 投资要求

/deep/ .el-dialog__body span {
  width: 150px;
}
/deep/ .el-dialog__body span.el-input__suffix {
  width: 60px;
  height: 100%;
}
/deep/ .el-dialog__body span.el-input__suffix span {
  width: 60px;
  height: 100%;
}
/deep/ .el-dialog__body span.el-input__prefix {
  width: 60px;
}
/deep/ .el-input--prefix input {
  padding-left: 60px;
}
/deep/ .dialog_box .el-input__suffix {
  width: 40px;
  span {
    width: 40px;
  }
}

.drop_down {
  margin: 0 auto;
  width: 444px;
  height: 380px;
  background: #fff;
  border: 1px solid #eeeeee;
  border-radius: 10px;
  overflow-y: auto;
  scrollbar-color: #767ffe #e9f3ff; //滚动条轨道颜色   滚动条滑块的颜色
  scrollbar-width: 6px;
  scrollbar-width: thin; //thin模式下滚动条两端的三角按钮会消失
  &::-webkit-scrollbar {
    /*滚动条整体样式*/
    width: 6px; /*高宽分别对应横竖滚动条的尺寸*/
    height: 70px;
  }
  &::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 6px;
    background: linear-gradient(0deg, #767ffe, #79aefe);
  }
  &::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    background: #e9f3ff;
    border-radius: 6px;
  }
}
/deep/ .el-dialog__body span {
  width: 100px;
}

/deep/ .drop_down .el-icon-caret-right {
  width: 18px;
  position: absolute;
  cursor: pointer;
  right: 10px;
}

/deep/ .drop_down .el-tree > .el-tree-node > .el-tree-node__content {
  .el-icon-caret-right:before {
    content: "";
    display: block;
    width: 18px;
    height: 10px;
    display: block;
    background: url("~@img/leftTree/icon-page-right.png") no-repeat center;
  }
  .expanded:before {
    display: block;
    width: 18px;
    height: 10px;
    background: url("~@img/leftTree/sidenav-hover2.png") no-repeat center;
  }
  .is-leaf:before {
    background-image: unset;
  }
}
/deep/
  .drop_down
  .el-tree
  > .el-tree-node
  > .is-current
  > .el-tree-node__content {
  .el-icon-caret-right:before {
    content: "";
    display: block;
    width: 18px;
    height: 10px;
    display: block;
    background: url("~@img/leftTree/sidenav-hover2.png") no-repeat center;
  }
  // .el-icon-caret-right
  .expanded:before {
    display: block;
    width: 18px;
    height: 10px;
    background: url("~@img/leftTree/sidenav-hover2.png") no-repeat center;
  }
  .is-leaf:before {
    background-image: unset;
    background: unset;
  }
}
/deep/ .is-leaf:before {
  background-image: unset;
  background: unset;
}
/deep/.hidden .el-upload--picture-card {
  display: none;
}
/deep/.show .el-upload--picture-card {
  display: block;
}
/deep/ .el-upload--picture-card {
  width: 348px;
  height: 198px;
  line-height: 196px;
}

/deep/ .drop_down .el-tree-node__children .el-tree-node__content {
  .el-icon-caret-right:before {
    content: "";
    display: block;
    width: 18px;
    height: 10px;
    display: block;
    background: url("~@img/leftTree/icon-page-right.png") no-repeat center;
  }
  // .el-icon-caret-right
  .expanded:before {
    display: block;
    width: 18px;
    height: 10px;
    background: url("~@img/leftTree/sidenav-hover2.png") no-repeat center;
  }
  .is-leaf:before {
    background: unset;
    background-image: unset;
  }
}

/deep/ .drop_down .el-tree-node__children .is-current .el-tree-node__content {
  .el-icon-caret-right:before {
    content: "";
    display: block;
    width: 18px;
    height: 10px;
    display: block;
    background: url("~@img/leftTree/sidenav-hover2.png") no-repeat center;
  }
  // .el-icon-caret-right
  .expanded:before {
    display: block;
    width: 18px;
    height: 10px;
    background: url("~@img/leftTree/sidenav-hover2.png") no-repeat center;
  }
  .is-leaf:before {
    width: 0;
    height: 0;
    background: unset;
    background-image: unset;
  }
}

.el-tree {
  height: 100%;
  background: #ffffff;
  font-family: Microsoft YaHei;
  font-size: 16px;
  box-shadow: 0px 0px 10px 0px rgba(4, 0, 0, 0.05);
  color: #666;
}
/deep/ .el-tree-node__content {
  height: 58px;
  line-height: 58px;
  .el-tree-node__label {
    font-size: 18px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #000000;
    // color: #446DB3;
  }
}
/deep/ .el-tree-node__children {
  .el-tree-node__content {
    height: 54px;
    line-height: 54px;
    background: #f9f9f9;
    .el-tree-node__label {
      font-size: 16px;
    }
  }
  .el-tree-node__children {
    .el-tree-node__content {
      height: 54px;
      line-height: 54px;
      .el-tree-node__label {
        font-size: 16px;
      }
    }
  }
}
.border-box {
  width: 350px;
  border: 1px solid #ccc;
}
/deep/.el-tree-node__children {
  .el-tree-node__label {
    font-weight: 400;
    color: #666;
  }
}
/deep/ .el-tree-node__content {
  padding: 0 30px !important;
}
/deep/ .el-tree-node__children {
  .el-tree-node__content {
    padding: 0 30px 0 48px !important;
  }
}
/deep/.is-expanded {
  .el-tree-node__content {
    position: relative;
    .el-tree-node__label {
      color: #446db3;
    }
  }
  .el-tree-node__children {
    background: #f7faff;

    .el-tree-node__label {
      font-weight: 400;
      font-size: 16px;
      color: #666;
    }
  }
}
/deep/.el-tree > .el-tree-node:hover > .el-tree-node__content {
  background: #fff;
}
/deep/.el-tree > .el-tree-node:focus > .el-tree-node__content {
  background: #fff;
}
/deep/ .el-tabs .el-tabs__content {
  width: 100%;
}
/deep/.is-current > .el-tree-node__content > .el-tree-node__label {
  color: #446db3 !important;
}
/deep/
  .is-expanded
  .el-tree-node__children
  .is-expanded
  > .el-tree-node__content
  .el-tree-node__label {
  color: #446db3 !important;
}
/deep/
  .is-expanded
  .el-tree-node__children
  .el-tree-node__children
  .el-tree-node__content
  .el-tree-node__label {
  width: 100%;
}
/deep/
  .el-tree-node__children
  .el-tree-node__children
  .is-current
  .el-tree-node__content {
  background: #f7faff;

  .el-tree-node__label {
    font-weight: bold;
    color: #0446b4;
  }
}
@media screen and (min-width: 1366px) and (max-width: 1600px) {
  .portrait_main {
    width: 100%;
  }
  /deep/ .option .el-input {
    width: 230px;
  }
  /deep/ .option li {
    flex: 0 0 32%;
  }
  /deep/ .el-tabs .el-tabs__content {
    width: 100%;
  }
  /deep/ .edit_dialog1 .el-dialog {
    width: 1010px;
    height: 810px;
    margin-left: -505px !important;
    margin-top: -405px !important;
  }
  .flex_dialog .flex-steps {
    flex: 0 0 150px;
    height: 600px;
  }
  .dialog_box .el-input {
    margin-bottom: 14px;
  }
  .el-textarea {
    height: 100px;
  }
  /deep/ .el-step.is-vertical .el-step__line {
    top: 42px;
  }
  /deep/ .el-step__line {
    height: 60px;
  }
  .flex-from-last .title {
    padding: 10px 10px;
  }
}
@media only screen and (width: 1366px) {
  .portrait_main {
    width: 100%;
  }
  /deep/ .option .el-input {
    width: 210px;
  }
  /deep/ .option li {
    flex: 0 0 32%;
  }
  /deep/ .el-tabs .el-tabs__content {
    width: 1010px;
  }
}
@media screen and (max-width: 1200px) {
  .portrait_main {
    width: 100%;
  }
  /deep/ .option .el-input {
    width: 230px;
  }
  /deep/ .option li {
    flex: 0 0 48%;
  }
  /deep/ .el-tabs .el-tabs__content {
    width: 802px;
    overflow: hidden;
    overflow-y: scroll;
  }
  .add {
    width: 90px;
  }
  /deep/ .edit_dialog1 .el-dialog {
    width: 1010px;
    height: 720px;
    margin-left: -505px !important;
    margin-top: -360px !important;
  }
  /deep/ .el-dialog__header {
    height: 60px;
    line-height: 60px;
  }
  .flex_dialog .flex-steps {
    height: 540px;
  }
  /deep/ .dialog_box .el-input {
    margin-bottom: 10px;
  }
  .el-textarea {
    height: 100px;
  }
  /deep/ .el-step.is-vertical .el-step__line {
    top: 42px;
  }
  /deep/ .el-step__line {
    height: 48px;
  }
  .flex-from-last .title {
    padding: 4px 10px;
  }
}
/deep/ .el-table {
  max-width: 1530px !important;
}
/deep/ .el-table .cell {
  height: 48px;
  line-height: 48px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/deep/ .el-table--border th {
  padding: 0;
}
.option .btn-box-flex {
  flex: 0 0 210px;
}
.flex-input {
  display: flex;
  justify-content: flex-start;
  & > div:last-of-type {
    margin-left: 20px;
  }
}
/deep/ .ed-main .flex-input > div .el-input {
  width: 120px;
}
.file-list {
  height: 60px;
  line-height: 60px;
  cursor: default;
  em,
  img {
    vertical-align: middle;
  }
  em {
    font-family: Microsoft YaHei;
    font-weight: 400;
    font-style: normal;
  }
  .name {
    display: inline-block;
    max-width: 260px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin: 0 14px;
    font-size: 16px;
    color: #666666;
  }
  .s {
    margin: 0 10px 0 6px;
    font-size: 14px;
    color: #999999;
  }
  .d {
    margin: 0 0 0 6px;
    font-size: 14px;
    color: #999999;
  }
}
.file-show {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: #fff;
  z-index: 999999;
  .gb {
    position: absolute;
    right: 50px;
    top: 30px;
    font-size: 18px;
    display: inline-block;
    width: 100px;
    height: 40px;
    line-height: 40px;
    font-weight: 400;
    background: #446db3;
    color: #ffffff;
    border-radius: 8px;
    text-align: center;
    cursor: pointer;
  }
  .word,
  .xlsx,
  iframe {
    width: 100vw;
    height: 100vh;
    overflow: auto;
  }
  .xlsx {
    .title {
      height: 100px;
      line-height: 100px;
      font-size: 24px;
    }
    /deep/ .el-table {
      width: 100% !important;
      max-width: 100% !important;
    }
  }
}
/*
  *常用电脑尺寸  1680 * 900
  *              1536 * 864
  *              1440 * 900
  *ipad pro      1366 * 1024
  *ipad mini     1024 * 768
  *ipad          1024 * 768
 */
/*分辨率低于1680，采用下面的样式*/
@media screen and (max-device-width: 1680px) {
  /deep/ .el-table {
    max-width: 1290px !important;
  }
  .option li label {
    width: 120px;
  }
  /deep/ .edit .el-dialog {
    transform: scale(0.8);
    -moz-transform: scale(0.8);
    -webkit-transform: scale(0.8);
    -o-transform: scale(0.8);
  }
}
/*分辨率低于1536，采用下面的样式*/
@media screen and (max-device-width: 1536px) {
  /deep/ .el-table {
    max-width: 1145px !important;
    height: 392px !important;
  }
  /deep/ .option .el-input {
    width: 140px !important;
  }
  /deep/ .option li {
    flex: 0 0 25% !important;
  }
  .option li label {
    width: 70px;
    font-size: 14px;
  }
  .add,
  .del,
  .examine {
    margin-bottom: 16px;
  }
}
/*分辨率低于1440，采用下面的样式*/
@media screen and (max-device-width: 1440px) {
  /deep/ .el-table {
    max-width: 1066px !important;
    height: 491px !important;
  }
  /deep/ .option .el-input {
    width: 120px !important;
  }
  /deep/ .edit .el-dialog {
    transform: scale(0.75);
    -moz-transform: scale(0.75);
    -webkit-transform: scale(0.75);
    -o-transform: scale(0.75);
  }
}
/*分辨率低于1366，采用下面的样式*/
@media screen and (max-device-width: 1366px) {
  /deep/ .el-table {
    max-width: 990px !important;
    height: 392px !important;
  }
  /deep/ .edit .el-dialog {
    transform: scale(0.7);
    -moz-transform: scale(0.7);
    -webkit-transform: scale(0.7);
    -o-transform: scale(0.7);
  }
  .option li label {
    width: 70px;
    font-size: 14px;
  }
}
/*分辨率低于1180，采用下面的样式*/

@media screen and (max-device-width: 1180px) {
  /deep/div .el-tabs .el-tabs__content {
    width: 940px !important;
  }
  /deep/ .edit .el-dialog {
    transform: scale(0.62);
    -moz-transform: scale(0.62);
    -webkit-transform: scale(0.62);
    -o-transform: scale(0.62);
  }
  /deep/ .option .el-input {
    width: 100px !important;
  }
  /deep/ .el-table {
    max-width: 890px !important;
    height: 392px !important;
  }
}
/*分辨率低于1024，采用下面的样式*/
@media screen and (max-device-width: 1024px) {
  .option li label {
    width: 70px;
    font-size: 12px;
  }
  /deep/ .edit .el-dialog {
    transform: scale(0.56);
    -moz-transform: scale(0.56);
    -webkit-transform: scale(0.56);
    -o-transform: scale(0.56);
  }
  /deep/ .option .el-input {
    width: 100px !important;
  }
  /deep/ .el-table {
    max-width: 734px !important;
    height: 340px !important;
  }
  /deep/ .option .el-input {
    width: 94px !important;
  }
  .add {
    width: 100px;
  }
  /deep/ .option .el-button {
    width: 80px !important;
  }
}
/deep/ .el-table .el-table__body-wrapper .el-table__cell .cell,
/deep/ .el-table .el-table__fixed-body-wrapper .el-table__cell .cell {
  cursor: default !important;
}
</style>